<template>
  <div class="project-preview">
    <!-- 项目概览 -->
    <div class="overview">
      <h2>{{ project.name }}</h2>
      <p>{{ project.description }}</p>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card>
            <div class="metric">
              <div class="label">进度</div>
              <div class="value">{{ project.progress }}%</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="metric">
              <div class="label">任务总数</div>
              <div class="value">{{ project.totalTasks }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="metric">
              <div class="label">成员数</div>
              <div class="value">{{ project.memberCount }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="metric">
              <div class="label">截止日期</div>
              <div class="value">{{ project.dueDate }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 甘特图 -->
    <div class="gantt-chart">
      <h3>任务进度</h3>
      <div ref="ganttChart" style="width: 100%; height: 300px;"></div>
    </div>

    <!-- 任务状态统计 -->
    <div class="task-status">
      <h3>任务状态</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <div class="metric">
              <div class="label">进行中</div>
              <div class="value">{{ taskStatus.inProgress }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="metric">
              <div class="label">已完成</div>
              <div class="value">{{ taskStatus.completed }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="metric">
              <div class="label">未开始</div>
              <div class="value">{{ taskStatus.notStarted }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近活动 -->
    <div class="recent-activities">
      <h3>最近活动</h3>
      <el-timeline>
        <el-timeline-item
            v-for="activity in recentActivities"
            :key="activity.id"
            :timestamp="activity.timestamp"
        >
          {{ activity.description }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 项目数据
const project = ref({
  name: '示例项目',
  description: '这是一个示例项目的描述。',
  progress: 75,
  totalTasks: 20,
  memberCount: 5,
  dueDate: '2023-10-31',
});

// 任务状态
const taskStatus = ref({
  inProgress: 10,
  completed: 5,
  notStarted: 5,
});

// 最近活动
const recentActivities = ref([
  { id: 1, timestamp: '2023-10-01', description: '张三更新了任务1' },
  { id: 2, timestamp: '2023-10-02', description: '李四上传了文档' },
]);

// 甘特图
const ganttChart = ref(null);
onMounted(() => {
  const chart = echarts.init(ganttChart.value);
  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'time' },
    yAxis: { data: ['任务1', '任务2', '任务3'] },
    series: [
      {
        type: 'bar',
        data: [
          { name: '任务1', value: [new Date('2023-10-01'), new Date('2023-10-10')] },
          { name: '任务2', value: [new Date('2023-10-05'), new Date('2023-10-15')] },
          { name: '任务3', value: [new Date('2023-10-10'), new Date('2023-10-20')] },
        ],
      },
    ],
  };
  chart.setOption(option);
});
</script>

<style scoped>
.project-preview {
  padding: 20px;
}

.overview h2 {
  margin-bottom: 10px;
}

.metric {
  text-align: center;
}

.metric .label {
  font-size: 14px;
  color: #666;
}

.metric .value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}

.gantt-chart,
.task-status,
.recent-activities {
  margin-top: 30px;
}

.recent-activities .el-timeline {
  margin-top: 20px;
}
</style>